<template>
 <div>
    <h1 >公司节点维护</h1>
   <el-form :inline="true" class="demo-form-inline" >
     <el-form-item label="企业名称">
       <el-input v-model="studentQuery.name"></el-input>
     </el-form-item>


     <el-form-item >
       <el-button type="success" >查询</el-button>
       <el-button type="success" @click="addPage">新增</el-button>
     </el-form-item>
   </el-form>

   <el-table border :data="list" v-loading="loading"
             element-loading-text="ai正在思考中……"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)"
             style="width:100%">
     <el-table-column label="企业名称" prop="企业名称"   width="100px"></el-table-column>
     <el-table-column label="成立日期" prop="成立日期" ></el-table-column>
     <el-table-column label="注册资本(万元)" prop="注册资本" ></el-table-column>
     <el-table-column label="主营业务" prop="主营业务" ></el-table-column>
     <el-table-column label="操作">
       <template slot-scope="x">
         <el-button type="warning" size="mini" @click="edit(x.$index,x.row)">编辑</el-button>
         <el-button type="danger" size="mini" @click="del(x.$index,x.row)">删除</el-button>
       </template>
     </el-table-column>
   </el-table>


   <!-- 编辑- 对话框组件 -->
   <el-dialog :visible.sync="isShow" width="30%" title="公司节点信息编辑">
     <el-form label-width="80px">
       <el-form-item label="企业名称">
         <el-input v-model="companyUpdate.企业名称"></el-input>
       </el-form-item>

       <el-form-item label="成立日期">
         <el-input v-model="companyUpdate.成立日期"></el-input>
       </el-form-item>

       <el-form-item label="注册资本(万元)">
         <el-input v-model="companyUpdate.注册资本"></el-input>
       </el-form-item>

       <el-form-item label="主营业务">
         <el-input v-model="companyUpdate.主营业务"></el-input>
       </el-form-item>

       <el-form-item >
         <el-button type="success" size="mini" @click="updateNode">保存</el-button>
         <el-button type="success" size="mini">重置</el-button>
       </el-form-item>
     </el-form>
   </el-dialog>

   <!-- 新增- 对话框组件 -->
   <el-dialog :visible.sync="addShow" width="30%" title="公司节点信息新增">
     <el-form label-width="80px">
       <el-form-item label="企业名称">
         <el-input v-model="company.企业名称"></el-input>
       </el-form-item>

       <el-form-item label="成立日期">
         <el-input v-model="company.成立日期" disabled></el-input>
       </el-form-item>

       <el-form-item label="注册资本(万元)">
         <el-input v-model="company.注册资本"></el-input>
       </el-form-item>

       <el-form-item label="主营业务">
         <el-input v-model="company.主营业务"></el-input>
       </el-form-item>

       <el-form-item >
         <el-button type="success" size="mini" @click="createNode">保存</el-button>
         <el-button type="success" size="mini">重置</el-button>
       </el-form-item>
     </el-form>
   </el-dialog>


 </div>
</template>

<script>
    export default {
        name: "LIst",
        data(){
          return{
            companyUpdate:{
              企业名称:"",
              成立日期:"",
              注册资本:"",
              主营业务:""
            },
            company:{
              企业名称:"",
              成立日期:"",
              注册资本:"",
              主营业务:""
            },
            studentQuery:{
              name:"",
              xueli:""
            },
            list:[],
            isShow:false, //编辑对话框是否显示
            addShow:false,//新增对话框是否显示
            loading:false,
          }
        },
      mounted() {
          this.queryNode();
      },
      methods:{
        updateNode(){
          const self=this;
          this.$http.get("/updateNode/",{params:self.companyUpdate})
          .then(function(rs){
            if(rs.data.code===200) {
              self.$message(rs.data.msg);
              //关闭对话框
              self.isShow = false;
              //查询节点
              self.queryNode();
            }
          })
        },
        createNode(){
          const self=this;
          this.$http.get("/createNode/",{params:self.company})
          .then(function(rs){
            if(rs.data.code===200) {
              self.$message(rs.data.msg);
              //关闭对话框
              self.addShow = false;
              //查询节点
              self.queryNode();
            }
          })
        },
        queryNode(){//查询所有节点
          const self=this;
          // 显示加载框
          this.loading = true;
          this.$http.get("/queryNode/").then(function (rs){
            try {
              // 2. 先判断 rs 和 rs.data 是否存在（避免后端返回格式错误导致报错）
              if (!rs || !rs.data) {
                throw new Error("接口返回格式错误，无有效数据");
              }
              console.log("接口返回数据：", rs.data);
              if (rs.data.code === 200) {
                self.list = rs.data.data || []; // 防 data 为 null
              } else {
                self.list = [];
                self.$message.warning(rs.data.msg || "未查询到数据");
              }
            } catch (err) {
              // 3. 处理「返回数据格式错误」（比如 rs.data 不存在）
              self.list = [];
              self.$message.error("数据解析失败：" + err.message);
              console.error("数据解析错误：", err);
            } finally {
              // 4. 无论解析成功/失败，都关闭加载
              self.loading = false;
            }
          })
          .catch(function (err) {
            // 5. 处理「请求失败」（接口404/500、跨域等）
            self.loading = false; // 关键：请求失败必须关加载
            self.list = [];
            self.$message.error("查询接口请求失败：" + err.message);
            console.error("接口请求错误：", err);
          });

        },
        edit:function(index,x){
          this.isShow = true;
          //数据回显
          this.form = x;
        },
        del:function(index,x){
          const self = this
          this.$confirm("是否要删除这个节点?", "提示",).then(function (){
            self.$http.get("/deleteNode/",{params:x}).then(function (rs){
              if(rs.data.code===200){
                self.$message(rs.data.msg);
                self.queryNode();
              }
            })
          }).catch(function (){
            self.$message("取消删除");
          })
        },
        addPage:function(){
          this.addShow = true;
        },

      }
    }
</script>

<style scoped>

</style>
